<template>
	<view class="index">
		<view class="search-wrapper">
			<input confirm-type="search" @confirm="search" type="text" v-model="keywords" class="input"
				placeholder="输入供应商名称关键字查询" />
			<uni-icons v-if="keywords" type="clear" @tap="keywords = ''" size="18" color="#898989"
				class="close"></uni-icons>
			<image src="../static/image/search-icon.png" class="icon" mode="widthFix"></image>
			<view class="search-btn" @click="search">
				搜索
			</view>
		</view>
		<view class="tabs-wrapper">
			<v-tabs class="v-tab" v-model="current" :tabNumbers="tabNumbers" @change="changeTab" :tabs="tabList"
				:scroll="false" :bold="false" lineHeight="4rpx" lineColor="#555BFF" activeColor="#555BFF"
				color="#79838A" fontSize="30rpx"></v-tabs>
		</view>
		<view class="page-wrapper">
			<swiper class="swiper" :current="current" @change="changePage">
				<swiper-item class="swiper-item" v-for="(_swiper,i) in tabList" :key="i">
					<mescroll-item ref="mescrollItem" @getCount="getCount" :i="i" :index="current"
						:keywords="keywords"></mescroll-item>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import MescrollItem from "./mescroll-swiper-item.vue";

	export default {
		data() {
			return {
				tabList: ['待上报', '待审核'],
				tabNumbers: [],
				first: true,
				current: 0,
				swiperList: [],
				single: this.$helper.getDay(0, '-'),
				keywords: '',
				waitReport: [],
				waitAudit: [],
				reason: '',
			}
		},
		onLoad(option) {
			this.getCount()
			if (option.type) {
				this.$nextTick(() => {
					this.current = parseInt(option.type);
				})
			}
		},
		computed: {
			dateStr() {
				let str = '';
				if (this.single === this.$helper.getDay(0, '-')) {
					str += '今天 ';
				} else if (this.single === this.$helper.getDay(-1, '-')) {
					str += '昨天 ';
				} else if (this.single === this.$helper.getDay(-2, '-')) {
					str += '前天 ';
				}
				str += this.single.substring(5);
				return str;
			}
		},
		methods: {
			changePage(e) {
				this.current = e.detail.current;
			},
			changeTab() {

			},
			search() {
				this.$refs.mescrollItem[this.current].refresh();
			},
			refresh() {
				this.getCount();
				this.$refs.mescrollItem[this.current].refresh();
			},
			async getCount() {
				const data = await this.$api.get('/adm/product/priceSupplyCount', {}, false)
				if (data.code === 200) {
					this.tabNumbers = [data.data.wait_report, data.data.wait_audit]
				}
			},
			select(array) {
				if (this.current === 0) {
					this.waitReport = array;
				} else {
					this.waitAudit = array;
				}
			},
			aduit(type) {
				if (!this.waitAudit.length) {
					uni.showToast({
						title: '请至少选择一条数据进行审核',
						icon: 'none'
					})
					return
				}
				if (type === 0) { //驳回
					this.reason = '';
					this.$refs.popup.open('center');
				} else { //审核通过
					this.$showModal({
						title: '通过报价',
						content: '本操作确认以后，该商品将按照以上价格进行上架售卖。如果不确定请选择取消。',
						confirmText: '同意',
						cancelText: '取消',
						success: async (res) => {
							if (res.confirm) {
								this.confirm(1)
							}
						}
					})
				}
			},
			async confirm(status) {
				const ids = this.waitAudit.map(item => {
					return item.currentPriceSupplyId
				})
				const params = {
					ids: ids,
					applyStatus: status,
				}
				if (status === 3) {
					params.examineOpinion = this.reason;
				}
				console.log(params)
				return
				const data = await this.$api.post('/adm/pricesupply/examineBatch', params)
				if (data.code === 200) {
					uni.showToast({
						title: '审核成功！'
					})
					this.waitAudit = [];
					this.$refs.mescrollItem[this.current].refresh();
					this.getCount()
				}
			},
			closeReject() {
				this.$refs.popup.close()
			},
			async confirmReject() {
				this.confirm(3)
				this.closeReject()
			},
			takeOff() {
				if (!this.waitReport.length) {
					uni.showToast({
						title: '请至少选择一个商品下架',
						icon: 'none'
					})
					return
				}
				const ids = this.waitAudit.map(item => {
					return item.id
				})
				this.$showModal({
					title: '通过报价',
					content: '本操作确认以后，选中商品将全部下架。如果不确定请选择取消。',
					confirmText: '同意',
					cancelText: '取消',
					success: async (res) => {
						if (res.confirm) {
							const data = await this.$post("/adm/product/takeBatchOff", ids)
							if (data.code === 200) {
								uni.showToast({
									title: '商品已下架！'
								})
								this.$refs.mescrollItem[this.current].refresh();
								this.getCount()
							}
						}
					}
				})
			},
		},
		components: {
			MescrollItem
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;

		.search-wrapper {
			background-color: #ffffff;
			margin: 3upx 0;
			padding: 10upx 20upx;
			position: relative;
			display: flex;
			align-items: center;

			.input {
				border-radius: 10upx;
				border: 2upx solid #acacac;
				height: 70upx;
				width: 100%;
				padding: 0 120upx 0 30upx;
				box-sizing: border-box;
				font-size: 32upx;
			}

			.icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 190upx;
				width: 26upx;
				height: 26upx;
			}

			.close {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 230upx;
			}

			.search-btn {
				width: 200upx;
				background-color: #555BFF;
				color: #ffffff;
				height: 70upx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10upx;
				margin-left: 10upx;
				font-size: 28upx;
			}
		}

		.tabs-wrapper {
			display: flex;
			align-items: center;
			background-color: #ffffff;

			.v-tab {
				flex: 1;
			}

			.date-wrapper {
				font-size: 30upx;
				margin-right: 20upx;
				color: #434343;
				display: flex;
				align-items: center;
				height: 30upx;
				border-left: 1upx solid #cecece;
				padding-left: 30upx;
				min-width: 180upx;
				text-align: center;

				.icon {
					font-weight: bold;
					margin-left: 5upx;
				}
			}
		}

		.swiper {
			height: calc(100vh - 160upx);

			.tip {
				color: #FF8D1A;
				background-color: #ffffff;
				border-radius: 20upx;
				padding: 20upx;
				font-size: 28upx;
			}

			.nodata-wrapper {
				text-align: center;
				font-size: 32upx;
				color: #666666;

				.nodata-image {
					margin-top: 300upx;
					margin-bottom: 10upx;
					width: 246upx;
				}

				.loading-image {
					margin-top: 300upx;
					margin-bottom: 10upx;
					width: 296upx;
					height: 205upx;
				}
			}
		}

		.bottom-wrapper {
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #ffffff;
			height: 110upx;
			display: flex;
			align-items: center;
			padding: 0 26upx;
			border-top: 1upx solid #efefef;

			.select-text {
				flex: 1;
				color: #808080;
				font-size: 32upx;
			}

			.btn {
				border: 1upx solid #D6D6D6;
				border-radius: 10upx;
				width: 220upx;
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333333;
				font-size: 30upx;

				&.primary {
					border-color: #555BFF;
					color: #ffffff;
					background-color: #555BFF;
					margin-left: 26upx;
				}
			}
		}

		.popup-wrapper {
			background-color: #ffffff;
			width: 600upx;
			height: 300upx;
			border-radius: 20upx;
			overflow: hidden;
			position: relative;

			.popup-title-wrapper {
				text-align: center;
				position: relative;
				margin: 30upx 0;

				.title {
					font-size: 36upx;
				}

				.close {
					position: absolute;
					right: 30upx;
				}
			}

			.popup-content-wrapper {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20upx 0;

				.textarea {
					width: 520upx;
					height: 140upx;
					box-sizing: border-box;
					border: 1upx solid #cecece;
					padding: 20upx;
					border-radius: 10upx;
				}
			}

			.popup-btn-wrapper {
				position: absolute;
				bottom: 0;
				height: 100upx;
				width: 100%;
				display: flex;
				align-items: center;
				border-top: 1upx solid #efefef;

				.btn {
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #212121;
					flex: 1;
					font-size: 32upx;

					&:first-child {
						border-right: 1upx solid #efefef;
					}

					&.primary {
						color: #555BFF;
					}
				}
			}
		}
	}
</style>